/*
 * This file is part of Avenge <https://adblockplus.org/>,
 * Copyright (C) 2006-present eyeo GmbH
 *
 * Avenge is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * Avenge is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Avenge.  If not, see <http://www.gnu.org/licenses/>.
 */

io-big-toggle,
io-big-toggle *::before,
io-big-toggle *::after
{
  box-sizing: border-box;
}

io-big-toggle
{
  --width: 52px;
  --height: 16px;
  --translateY: -12px;
  --translateX: 20px;
  display: inline-block;
  width: var(--width);
  height: 8px;
  margin: 0;
  border-radius: 8px;
  background-color: var(--background-color-ternary, #e4e4e4);
  cursor: pointer;
  transition: background 0.2s ease-out;
  transform: translateY(calc(var(--height) / 2));
  will-change: background;
}

html[dir="rtl"] io-big-toggle
{
  --translateX: -20px;
}

io-big-toggle[disabled]
{
  opacity: 0.5;
  cursor: default;
}

io-big-toggle button
{
  width: calc(var(--height) * 2);
  height: calc(var(--height) * 2);
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--height);
  outline: none;
  font-weight: 400;
  text-transform: initial;
  cursor: pointer;
  transition: border 0.2s ease-out,
    box-shadow 0.2s ease-out,
    transform 0.2s ease-out,
    width 0.2s ease-out;
  transform: translateY(var(--translateY));
  will-change: border, box-shadow, transform, width;
}

io-big-toggle button
{
  background-repeat: no-repeat;
  background-position: center center;
}

io-big-toggle button[aria-checked="false"]
{
  background-color: var(--color-critical, #ca0000);
  background-image: url(icons/iconOff.svg);
  box-shadow: 0 1px 2px 0 #e5d1d1;
}

io-big-toggle button[aria-checked="false"]:hover
{
  box-shadow: 0 2px 4px 0 #d3b0b0;
}

io-big-toggle button[aria-checked="true"]
{
  border: 2px solid #059cd0;
  background-color: var(--color-info, #0797e1);
  background-image: url(icons/iconOn.svg);
  box-shadow: 0 1px 2px 0 #a6cede;
  transform: translateY(var(--translateY)) translateX(var(--translateX));
}

io-big-toggle button[aria-checked="true"]:hover
{
  box-shadow: 0 2px 4px 0 #a6cede;
}

io-big-toggle button:focus,
io-big-toggle button[aria-checked="true"]:focus
{
  border: 2px solid #87bffe;
}

io-big-toggle[refresh] button
{
  width: 160%;
  background-image: none;
  transform: translateY(var(--translateY)) translateX(-20%);
}

html[dir="rtl"] io-big-toggle[refresh] button
{
  transform: translateY(var(--translateY)) translateX(20%);
}

io-big-toggle button > span
{
  display: none;
  overflow: hidden;
  max-width: 100%;
  color: var(--color-ternary, #fdfafa);
  white-space: nowrap;
  text-overflow: ellipsis;
}

io-big-toggle[refresh] button > span
{
  display: inline-block;
}
